<template>
	<view>
		<u-sticky class="u-sticky">
			<view class="padding-sm flex bg-grey light align-center">
			  <u-search
				placeholder="搜索"
				v-model="keyword"
				bg-color="#fff"
				:show-action="false"
				@click="clickShow"
				searchIconSize="28"
				:inputStyle="inputStyle"
				:disabled = "true"
				height="80"
				:showInput ="false"
			  ></u-search>
			    <!-- <view class="button">使用登记(扫码)</view> -->
			  </view>
		</u-sticky>
		<scroll-view
		  scroll-y="true"
		  :style="{ height: scrollViewHeight + 'px' }"
		  @scrolltolower="loadMore"
		  :refresher-enabled="true"
		  :scrolltolower-enabled="true"
		  :refresher-triggered="triggered"
		  @refresherrefresh="refresherrefresh"
		  class="scroll-view-class"
		>
			<view
			  class="scroll-content"
			  ref="scrollContent"
			  style="display: flex;flex-direction: column;justify-content: space-between;"
			>
				<view
				  class="radius align-center margin-bottom-lg"
				  v-for="(item, index) in list"
				  :key="index"
				>
					<view @click="moldSelect(item)">
						<!-- <view class="bg-green light flex align-center justify-between">
							<view class="flex align-center">
								<view class="padding-sm text-xl bg-blue margin-sm radius textBold">{{index + 1}}</view>
								<view class="text-xl text-black">02Dc232000C1</view>
							</view>
							<view>
								<button class="cu-btn margin bg-blue padding-sm text-xl">空闲中</button>
							</view>
						</view> -->
						<view class="cu-form-group" style="display: flex;justify-content: space-between;">
							<view
								style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;min-width: 40px;text-align: center;font-style: italic;font-weight: bold">
								{{ index + 1 }}
							</view>
							<view style="font-size: 40rpx;" class="text-bold text-red">
								{{ item.cinvaddcode ? item.cinvaddcode : '' }}
							</view>
							<!-- <dictLabel :value="item.status" dict-type="bpm_biz_status" ></dictLabel> -->
						</view>
						<view class="cu-form-group ">
							<view class="title">存货编码：</view>
							<view style="flex: 1;"> {{ item.cinvcode ?  item.cinvcode  : ''}} </view>
						</view>
						<view class="cu-form-group ">
							<view class="title">存货名称：</view>
							<view style="flex: 1;"> {{ item.cinvname ?  item.cinvname : ''}} </view>
						</view>
						
					</view>
				</view>
				<view v-if="list.length" class="loadmore" style="justify-self: flex-end">
				  <u-loadmore :status="loadStatus"></u-loadmore>
				</view>
				<u-empty v-if="!list.length" style="height: 100%;"></u-empty>
			</view>
		</scroll-view>
		<!-- <view>
			<movable-area class="movable-area1">
				<movable-view class="movable-view" :x="x" :y="y" direction="all">
					<u-button size="mini" @click="handleFocus" type="success"
						style="width: 90px; height: 70px; color: #fff; ">
						<view style="font-size: 16px;display: flex; flex-direction: column;text-align: center;">
							<u-icon style="margin: auto;" name="scan" size="80"></u-icon>
							<view >扫一扫</view>
						</view>
					</u-button>
					
				</movable-view>
			</movable-area>
		</view> -->
		<filterSearch :modalName="modalName"  @getModalName="getModalName"></filterSearch>
	</view>
</template>

<script>
	import filterSearch from '@/pages/asd/components/inv/invFilterSearch.vue';
	import dictLabel from "@/pages/asd/components/dictLabel.vue";
	import bpmUtils from '@/pages/bpm/bpmUtils.js';
	export default {
		components:{
			filterSearch,
			dictLabel
		},
		data() {
			return{
				inputStyle:{
				  fontSize:'34rpx'
				},
				keyword: "",
				triggered: false,
				list:[ ],
				focus:true,
				x: 650, //x坐标
				y: 650, //y坐标
				scrollViewHeight: 0,
				loadStatus: "loadmore",
				query: {
				  pageNo: 1,
				  pageSize: 20,
				  status: ''
				},
				show: false,
				modalName: null,
				dictList:[],
				type:''
			}
		},
		mounted() {
			
		  this.calculateScrollViewHeight();
		},
		onShow() {
			this.query.pageNo = 1;
			this.loadData()
		},
		onLoad(e){
			this.loadData()
			this.getDictList()
			if(e.type){
				this.type = e.type
			}
		},
		methods:{
			// "pages/asd/components/inv/mold?id=" + item.id,
			moldSelect(item){
				console.log('123123')
				uni.navigateTo({
					url: "/pages/asd/components/inv/mold?cinvcode=" + item.cinvcode +'&cinvaddcode= ' + item.cinvaddcode + '&cinvname= ' + item.cinvname + '&type= ' + this.type ,
				});
			},
			trace(item) {
				this.$u.api.bpm.getTask({
					'procIns.formKey': 'ASD_MOLD_REPAIR',
					'procIns.bizKey': item.id
				}).then(resTrace => {
					// 触发名为 'trace' 的事件，并传递 resTrace.procIns.id 作为参数
					this.$emit('trace', resTrace.procIns.id);
					bpmUtils.navTrace(this, 'id=' + resTrace.procIns.id);
				}).catch(error => {
					console.error('Failed to fetch task:', error);
				});	
			},
			getDictList() {
			  this.$u.api
			    .dictListData({ dictType: "bpm_biz_status" })
			    .then((res) => {
			      this.dictList = res;
			    });
			},
			toDetails(item){
				this.$u.api.bpm.bpmTaskDeForm({ formKey: 'ASD_MOLD_REPAIR', bizKey: item.id }).then((res) => {
				  if(res.result == 'true'){
					  const url = res.mobileUrl;
					  if (url && url != '') {
					  	uni.navigateTo({
					  		url: url
					  	})
					  }
				  }else{
					this.$u.toast(res.message);
				  }
				});
				
				// this.$u.api.bpm.getTask({
				// 	'procIns.formKey': 'ASD_MOLD_REPAIR',
				// 	'procIns.bizKey' : item.id
				// }).then(res=>{
				// 	if(res.status == 2){
				// 		uni.navigateTo({
				// 		  url: "/pages/asd/repair/sjqr?params=" + JSON.stringify(item),
				// 		});
				// 	}else{
				// 		uni.navigateTo({
				// 		  url: "/pages/asd/repair/add?id=" + item.id,
				// 		});
				// 	}
				// })
				
			},
			toView(item){
				uni.navigateTo({
					url: "/pages/asd/repair/formView?id=" + item.id,
				});
			},
			confirm() {
			  // uni.navigateTo({
			  //   url: "/pages/asd/repair/add",
			  // });
			  uni.navigateTo({
			    url: "/pages/asd/components/scanMold?type=1",
			  });
			},
			clickShow(){
				// console.log('clickShow')
				// this.show = true
				this.modalName = "DrawerModalR";
			},
			async refresherrefresh() {
				this.triggered = true;
				this.query.pageNo = 1;
				await this.loadData();
				setTimeout(() => {
					this.triggered = false;
				}, 500);
				// this.triggered = false;
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadData("add");
				}, 100);
			},
			loadData(type) {
				this.$u.api.asd.basInventoryListData(this.query).then((res) => {
					this.show = false;
					if (res.list.length < 20 || res.list.length == 0) {
						this.loadStatus = "nomore";
					}
					var data = res.list;
					if (type == "add") {
						for (var i = 0; i < data.length; i++) {
							this.list.push(data[i]);
						}
					} else {
						this.list = data;
					}
			
				});
			},
			handleFocus() {
			  var _that = this;
			  _that.focus = false;
			  setTimeout(() => {
			    _that.focus = true;
			  }, 500);
			},
			async calculateScrollViewHeight() {
			  	await this.$nextTick(); // 确保DOM更新完成
			  	const query = uni.createSelectorQuery().in(this);
				query.select(".u-sticky").boundingClientRect((rect) => {
					if (rect && rect.height > 0) { // 确保rect有效且高度大于0
					this.headerHeight = rect.height;
					// 获取屏幕高度
					const systemInfo = uni.getSystemInfoSync();
					const screenHeight = systemInfo.windowHeight;
					// 计算scroll-view高度
					this.scrollViewHeight = screenHeight - this.headerHeight;
					console.log(this.scrollViewHeight, 'this.scrollViewHeight');
					} else {
					console.error('无法获取.u-sticky的高度或高度为0');
					}
				}).exec();
			},
			getModalName(item) {
			  console.log(item, "getModalName===");
			  // this.modalName = item;
			  const { modalName, query } = item;
			  this.modalName = modalName;
			  this.query = query;
			  this.loadData();
			},
		}
	}
</script>

<style  lang="scss">
	$all_width: 96rpx;
	$all_height: 96rpx;
	.movable-area1 {
	  z-index: 999;
	  height: 97vh;
	  width: 650rpx;
	  position: fixed;
	  right: $all_width;
	  top: -($all_height + 70rpx);
	  pointer-events: none; //此处要加，鼠标事件可以渗透
	
	  .movable-view {
	    width: $all_width;
	    height: $all_height;
	    pointer-events: auto; //恢复鼠标事件
	
	    image {
	      width: $all_width;
	      height: $all_height;
	    }
	  }
	}
	.cuIcon-squarecheckfill{
		font-size: 22px !important;
	}
	.item {
		width: 100%; /* 默认一行显示一列 */
		margin-bottom: 10px; /* 添加一些底部间距，看起来更美观 */
	}
	.flexWrap{
		flex-wrap: wrap;
	}
	
	/* 当屏幕宽度大于768px时，调整为一行显示两列 */
	@media (min-width: 768px) {
		.item {
			width: calc(48% - 10px); /* 减去间距，确保两列之间有空间 */
		}
	}
	.basisXs {
		flex-basis:25%
	}
	.basisXl {
		flex-basis: 75%;
	}
	.textBold {
		font-weight: bold;
		font-style: italic;
	}
	.title {
		width: 230rpx;
	}
</style>